<template>
  <div class="tranScoreMain">
    <div v-if='showData'>
      <div class="tranScoreTop">
        <p class="transName">{{userInfo.name}}</p>
        <p class="tranScore">{{examPaper.totalCount}}分</p>
      </div>
      <div class="tranDetail">
        <div class="tranDetailTitle">
          <!-- <img src="https://dati.co-links.com/static/xadmin/images/cateGory.png"
               alt=""> -->
          <span>考试详情</span>
        </div>
        <div class="tranDetailTotal">
          总分：
          <span>100</span>分 合格分数线：
          <span>60</span>分 答卷耗时：
          <!-- <span>{{ExamResult.long_time}}</span>秒 -->
          <span>{{examPaper.startHour}}小时{{examPaper.startMin}}分{{examPaper.startSecond}}秒</span>
        </div>
        <div class="tranTable">
          <div class="trabTableTop">
            <p>题型</p>
            <p>总题数</p>
            <p>答对题数</p>
            <p>总分</p>
            <p>得分</p>
          </div>
          <div class="trabTableList">
            <p>单选题</p>
            <p>{{examPaper.totalNum}}</p>
            <p>{{examPaper.rightTotal}}</p>
            <p>{{userInfo.fraction}}</p>
            <p>{{examPaper.totalCount}}</p>
          </div>
          <div class="trabTableBottom">
            本次考试共{{examPaper.totalNum}}道题，总分100分，您做对{{examPaper.rightTotal}}道题，得到
            <span>{{examPaper.totalCount}}</span> 分
          </div>
        </div>
        <div class="menuMain">
          <div class="topicSelect">
            <div class="singleSelection">
              <div class="singleList">
                <span v-for="(el,i) in examPaper.commitAnswer"
                      :class='{"right":el.right ==1,"wrong":el.right==0}'
                      :key=i>{{i+1}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="loading"
         class="loading">
      <img :src="loadingpng"
           alt="">
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      loading: true,
      loadingpng: 'https://dati.co-links.com/static/xadmin/images/loading2.png',
      showData: false
    }
  },
  computed: {
    ...mapState({
      examPaper: state => state.examPaper,
      ExamResult: state => state.ExamResult,
      userInfo: state => state.userInfo
    }),
    totalScore () {
      // return parseInt(100 / this.examPaper.totalNum * this.examPaper.rightTotal)
      return parseInt(this.ExamResult.grade)
    }
  },
  methods: {
    ...mapMutations(['setrandomRecord'])
  },
  mounted () {
    // console.log(this.examPaper)
    // console.log(this.ExamResult)
    wx.showLoading({
      title: '统计中',
      icon: 'loading'
    })
    if (this.ExamResult) {
      this.showData = true
      this.loading = false
      // wx.setStorageSync('finshed', 1)
      wx.hideLoading()
    }
  }
}
</script>
<style lang="stylus">
.tranScoreMain {
  width: 100%;
  height: 100%;
}

.menuMain {
  margin: 0 -10rpx;
}

.loading {
  position: relative;
  height: 100%;
  width: 100%;

  img {
    display: block;
    width: 237rpx;
    height: 335rpx;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
}

.tranScoreMain {
  height: 100%;
  background: #f7f7f7;
}

.tranScoreTop {
  height: 220rpx;
  background: white;
  text-align: center;
}

.transName {
  font-size: 42rpx;
  color: #666;
  line-height: 88rpx;
  font-weight: bold;
  padding-top: 10rpx;
}

.tranScore {
  font-size: 58rpx;
  color: #ef5151;
  font-weight: bold;
}

.tranDetail {
  margin-top: 20rpx;
  background: white;
  padding: 0 32rpx;
  padding-bottom: 38rpx;
}

.tranDetailTitle {
  height: 88rpx;
  line-height: 88rpx;
  vertical-align: middle;
}

.tranDetailTitle img {
  display: inline-block;
  width: 48rpx;
  height: 50rpx;
  vertical-align: middle;
}

.tranDetailTitle span {
  font-size: 32rpx;
  color: #333333;
  margin-left: 25rpx;
}

.tranDetailTotal {
  font-size: 30rpx;
  color: #333333;
}

.tranDetailTotal span {
  color: #00cc76;
}

.tranTable {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1px solid #e6e6e6;
  font-size: 0;
  margin-top: 15rpx;
  margin-bottom: 40rpx;
}

.trabTableTop, .trabTableList {
  background: #d0f5e6;
  height: 66rpx;
  line-height: 66rpx;
}

.trabTableList, .trabTableBottom {
  background: #fff;
  font-size: 28rpx;
}

.trabTableBottom {
  height: auto;
  padding: 10rpx 20rpx;
  background: #f7f7f7;
  text-align: justify;
}

.trabTableTop p, .trabTableList p {
  display: inline-block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 20%;
  height: 100%;
  font-size: 28rpx;
  color: #333333;
  text-align: center;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

.trabTableTop p {
  color: #333;
}

.trabTableList p {
  color: #666;
}

.tranBtn {
  text-align: center;
  margin-bottom: 38rpx;
}

.tranBtn span {
  display: inline-block;
  width: 290rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  border-radius: 10rpx;
  -webkit-border-radius: 10rpx;
  font-size: 28rpx;
  color: #fff;
  background: #00cc76;
}

.tranBtn .next {
  margin-left: 40rpx;
}

.singleSelection, .MultiSelection, .checkSelection {
  padding: 0 6rpx;
  margin-bottom: 20rpx;
  background: white;

  .title {
    padding-top: 20rpx;
    font-size: 32rpx;
    color: #333333;
  }
}

.singleList {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 30rpx;

  span {
    display: inline-block;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    color: #666666;
    font-size: 32rpx;
    text-align: center;
    line-height: 60rpx;
    background: #e6e6e6;
    margin: 16rpx;

    &.right {
      background: #3ac369;
      color: white;
    }

    &.wrong {
      background: #eb6100;
      color: white;
    }
  }
}
</style>
